<template>
  <a-card :bordered="false">
    <div class="table-operator">
      <a-button type="primary" icon="plus" @click="$refs.createModal.add()">新建</a-button>
      <a-button v-if="selectedRowKeys.length > 0" type="danger" icon="delete" @click="deleteAll">批量删除</a-button>
    </div>

    <s-table
      ref="table"
      size="default"
      rowKey="objectId"
      :columns="columns"
      :data="loadData"
      :rowSelection="options.rowSelection"
      showPagination="auto"
    >
      <span slot="serial" slot-scope="text, record, index">
        {{ index + 1 }}
      </span>
      <span slot="status" slot-scope="text">
        <a-tag :color="text?'#f50':'#108ee9'">{{ text?'展示':'隐藏' }}</a-tag>
      </span>
      <span slot="personalProfile" slot-scope="text">
        <ellipsis :length="50" tooltip>{{ text }}</ellipsis>
      </span>

      <span slot="action" slot-scope="text, record">
        <template>
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="handleDelete(record)">删除</a>
        </template>
      </span>
    </s-table>
    <create-form ref="createModal" @ok="handleOk" />
  </a-card>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import CreateForm from './CreateForm'
import av from '../../api/av'

export default {
  name: 'List',
  components: {
    STable,
    CreateForm,
    Ellipsis
  },
  data () {
    return {
      columns: [
        { title: '#', scopedSlots: { customRender: 'serial' } },
        { title: '申报职位', dataIndex: 'job' },
        { title: '说明', dataIndex: 'mark' },
        { title: '介绍', dataIndex: 'introduction', scopedSlots: { customRender: 'personalProfile' } },
        { title: '状态', dataIndex: 'status', scopedSlots: { customRender: 'status' } },
        { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' } }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return av.query('jobType', parameter)
          .then(async res => {
            const count = await av.queryCount('jobType')
            const totalPage = count / parameter.pageSize
            const result = {
              pageNo: parameter.pageNo,
              pageSize: parameter.pageSize,
              totalCount: count,
              totalPage: Math.ceil(totalPage)
            }
            result.data = res.map(v => {
              return {
                ...v._serverData,
                objectId: v.id
              }
            })
            return result
          })
      },
      selectedRowKeys: [],

      // custom table alert & rowSelection
      options: {
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      }
    }
  },
  created () {
    this.$http.get('/classes/jobType?where=%7B%7D&limit=0&count=1').then(res => {
      console.log(res)
    })
    this.tableOption()
  },
  methods: {
    handleUpdateSignUp (record) {
      av.updateSignUp(record.objectId, !record.qualifications).then(res => {
        this.successMsgRefresh('修改')
      })
    },
    handleDelete (record) {
      av.delete('jobType', record.objectId).then(res => {
        this.successMsgRefresh('删除')
      })
    },
    deleteAll () {
      this.$confirm({
        title: '确定删除选择的职位类别？',
        onOk: () => {
          av.destroyAll('jobType', this.selectedRowKeys).then(res => {
            this.successMsgRefresh('删除')
            this.selectedRowKeys = []
          })
        }
      })
    },
    successMsgRefresh (text) {
      this.$message.success(text + '成功')
      this.refresh()
    },
    refresh () {
      this.$refs.table.refresh()
    },
    tableOption () {
      this.options = {
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      }
    },
    handleEdit (record) {
      this.$refs.createModal.edit(record)
    },
    handleOk () {
      this.$refs.table.refresh()
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
    }
  }
}
</script>

<style lang="less">
  .table-operator{
    margin-bottom: 18px;
    button{
      margin-right: 8px;
    }
  }
</style>
